<template>
  <div class="widget-cate">{{ props.title }}</div>
  <Draggable
    tag="ul"
    item-key="type"
    ghostClass="ghost"
    :group="{ name: 'people', pull: 'clone', put: false }"
    :sort="false"
    :list="props.list"
  >
    <template #item="{ element }">
      <li
        v-if="props.fields.includes(element.type)"
        class="form-edit-widget-label"
        :class="{ 'no-put': element.tpye === 'divider' }"
      >
        <a>
          <SvgIcon :name="element.type" />
          <span>{{ element.label }}</span>
        </a>
      </li>
    </template>
  </Draggable>
</template>

<script lang="ts" setup name="ComponentGroup">
import { PropType } from 'vue';
import Draggable from 'vuedraggable';
import SvgIcon from '@/components/SvgIcon/index.vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  fields: {
    type: Array as PropType<Array<string>>,
    required: true
  },
  list: {
    required: true
  }
});
</script>
